{% extends 'users/base.html' %}
{% load static %}

{% block head %}
<title>登录页面</title>
{% endblock head %}

{% block extra_style %}
<script src="{% static 'users/js/three.min.js' %}"></script>
<script src="{% static 'users/js/vanta.birds.min.js' %}"></script>

<!-- Loading Bootstrap -->
<link href="{% static 'flatui/dist/css/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">

<!-- Loading Flat UI -->
<link href="{% static 'flatui/dist/css/flat-ui.css' %}" rel="stylesheet">
<link href="{% static 'flatui/docs/assets/css/demo.css' %}" rel="stylesheet">

<link rel="shortcut icon" href="img/favicon.ico">
<style>
    .login-center {
        height: 100vh;
    }
</style>
{% endblock %}

{% block content %}
<div class="vjs-fullscreen" id="my-background">
    <div class="row align-items-centerjustify-content-center login-center">
        <div class="col-md-4 col-md-offset-4">
            <!-- <div class="login-screen"> -->
            <div class="login-icon">
                <h4>Welcome to <small>Mail App</small></h4>
            </div>
            <div>
                <form class="login-form" action="" method="post">
                    {% csrf_token %}
                    <div class="form-group">
                        <input type="text" name="uname" class="form-control login-field" value=""
                            placeholder="输入账号" id="login-name">
                        <label class="login-field-icon fui-user" for="login-name"></label>
                    </div>

                    <div class="form-group">
                        <input type="password" name="pword" class="form-control login-field" value=""
                            placeholder="输入密码" id="login-pass">
                        <label class="login-field-icon fui-lock" for="login-pass"></label>
                    </div>
                    <input type="submit" class="btn btn-primary btn-lg btn-block" value="登录">
                    <!-- <input class="btn btn-primary btn-lg btn-block " type="submit" href="#">登录</a> -->
                    <!-- <a class="btn btn-primary btn-lg btn-block" type="reset" href="#">重置</a> -->
                    <a class="login-link" href="#">忘记密码?</a>
                </form>
            </div>
            {% if message %}
            <div class="alert alert-warning">{{ message }}</div>
            {% endif %}
            <!-- </div> -->
        </div>
    </div>


</div>


{% endblock content %}

{% block foot %}
<script>
    VANTA.BIRDS({
        el: "#my-background",
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minHeight: 200.00,
        minWidth: 200.00,
        scale: 1.00,
        scaleMobile: 1.00,
        backgroundColor: 0xdbeef2
    })
</script>
{% endblock foot %}